<template>
  <div class="task" ref="task">
    <my-head title="盘点管理"/>
    <!--     
    <mu-text-field v-model="value" placeholder="" disabled class='search'>
    <i class="iconfont icon-search"></i>
    </mu-text-field> -->
    
    <mu-paper id='inventory' :z-depth="1" class="loadmore-wrap" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <mu-container ref="container" class="loadmore-content">
        <mu-load-more :refreshing="refreshing" @refresh="refresh">
          <mu-container>
            <mu-paper :z-depth="1">
              <mu-data-table stripe :loading="tableLoading" :columns="columns" :sort.sync="sort" @sort-change="handleSortChange" :data="list"  @row-click="rowTap">
                <template slot-scope="scope">
                  <td>{{scope.row.code}}</td>
                  <td>{{scope.row.locationQty}}</td>
                  <td>{{scope.row.zone}}</td>
                  <td>{{scope.row.lineCount}}</td>
                  <td>{{scope.row.status}}</td>
                </template>
              </mu-data-table>
            </mu-paper>
          </mu-container>
        </mu-load-more>
      </mu-container>
    </mu-paper>

    
  </div>
</template>

<script>
import myHead from '@/components/header'
import api from "@/common/api"
export default {
  name: 'task',
  data () {
    return {
      num: 10,
      refreshing: false,
      text: 'List',
      loading: false,
      tableLoading: true,
      value: '',
      wrapperHeight: 0,
      sort: {
        name: '',
        order: 'asc'
      },
      columns: [
        { title: '盘点单号', name: 'code'},
        { title: '库位数', name: 'locationQty', width: 50},
        { title: '库区', name: 'zone', width: 65},
        { title: '排数', name: 'lineCount', width: 35},
        { title: '状态', name: 'status', width: 65}
      ],
      list: [],
      requestOnce: true
    }
  },
  components: {
    myHead
  },
  methods: {
    rowTap (index, row, event) {
      this.$router.push({name:"inventoryList", params: {row: row}});
    },
    handleSortChange ({name, order}) {
      this.list = this.list.sort((a, b) => order === 'asc' ? a[name] - b[name] : b[name] - a[name]);
    },
    refresh () {
      // 下拉刷新
      this.refreshing = true;
      this.$refs.container.scrollTop = 0;
      this.resData();
    },
    load () {
      // 上啦更新
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
      }, 2000)
    },
    resData () {
      if(this.requestOnce){
        this.requestOnce = false;
        /* 发送post请求 */
        this.common.reqData(api.app('inventoryQuery'), this.$store.state.user, res=>{
          this.requestOnce = true;
          let datas = res.data;
          if(datas.status == 100){
            this.tableLoading = false;
            this.refreshing = false;
            this.list = [];
            for(let item of datas.content.palns){
              this.list.unshift(item);
            }
          }else{
            this.tableLoading = false;
            this.refreshing = false;
            this.Toast({
                message: res.data.msg
            });
            console.log(res.data)
          }
        },err =>{
          this.tableLoading = false;
          this.refreshing = false;
          this.requestOnce = true;
          console.log(err)
        });
      }
    }
  },
  mounted () {
    // 确定高度
    this.wrapperHeight = document.documentElement.clientHeight - 45
    this.resData();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container{
  padding: 0;
}
.mu-table td.executioning{
  color: red;
}
.mu-table td.completed{
  color: green;
}
.search{
  display: block;
  margin: 10px auto ;
  width: 90%;
}
.search input{
  padding: 0 ;
}
.loadmore-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.loadmore-wrap .mu-appbar {
    width: 100%;
}
.loadmore-content {
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.mu-paper.mu-paper-round.mu-elevation-1{
  -webkit-box-shadow: none;
  box-shadow: none;
}
#inventory{
  padding: 0 5px;
}
</style>
